<template>
   <swiper ref="mySwiper" :options="swiperOptions" :style="{width:width,height:height}">
            <swiper-slide >1</swiper-slide>
            <swiper-slide >1</swiper-slide>
            <swiper-slide >1</swiper-slide>
            <swiper-slide >1</swiper-slide>
            <swiper-slide >1</swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default{
    props:{//用来接收父传子
        width:{
            type:String,
            required:true,
        },
        height:{
            type:String,
            required:true,
        }
    },
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    },
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
}

</script>

<style>

</style>